<template>
  <Main class="register">
    <div class="main">
      <div class="content">
        <div class="detail-left">
          <p class="title">PASS云&nbsp;|&nbsp;注册</p>
          <a-form class="form" :form="form" @submit="handleSubmit">
            <a-form-item v-bind="formItemLayout" label="用户名">
              <a-input
                v-decorator="[
                  'username',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入用户名 ！',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
              <a-input
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入密码 ！',
                      },
                      {
                        validator: validateToNextPassword,
                      },
                    ],
                  },
                ]"
                type="password"
              />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
              <a-input
                v-decorator="[
                  'confirm',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请确认密码 ！',
                      },
                      {
                        validator: compareToFirstPassword,
                      },
                    ],
                  },
                ]"
                type="password"
                @blur="handleConfirmBlur"
              />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="手机号码">
              <a-input
                v-decorator="[
                  'phone',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入手机号码 ！',
                      },
                    ],
                  },
                ]"
                style="width: 100%"
              >
                <a-select
                  slot="addonBefore"
                  v-decorator="['prefix', { initialValue: '86' }]"
                  style="width: 70px"
                >
                  <a-select-option value="86"> +86 </a-select-option>
                </a-select>
              </a-input>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="电子邮箱">
              <a-auto-complete
                v-decorator="[
                  'email',
                  {
                    rules: [
                      {
                        type: 'email',
                        message: '输入电子邮箱格式有误 ！',
                      },
                      {
                        required: true,
                        message: '请输入电子邮箱 !',
                      },
                    ],
                  },
                ]"
              >
                <a-input />
              </a-auto-complete>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
              <a-checkbox
                v-decorator="['agreement', { valuePropName: 'checked' }]"
              >
                我已经阅读
                <a href=""> PASS平台条款 </a>
              </a-checkbox>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
              <a-button type="primary" html-type="submit"> 注册 </a-button>
            </a-form-item>
          </a-form>
        </div>
        <Bg1></Bg1>
      </div>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/Main.vue";
import Bg1 from "@/components/svg/Bg1.vue";

export default {
  name: "Register",
  components: {
    Main,
    Bg1,
  },
  data() {
    return {
      confirmDirty: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("Two passwords that you enter is inconsistent!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
  },
};
</script> 

<style lang="less" scoped>
.register {
  background-color: #f5f5f6;

  .main {
    height: 700px;
    overflow: hidden;

    .content {
      width: 80%;
      max-width: 1200px;
      height: 700px;
      margin: 50px auto;
      background-color: #ffffff;
      overflow: hidden;

      .detail-left {
        width: 600px;
        height: 700px;
        display: inline;
        float: right;

        .title {
          float: left;
          width: 650px;
          font-size: 35px;
          font-weight: 900;
          padding-top: 75px;
          margin-bottom: 60px;
        }

        .form {
          width: 500px;
        }
      }
    }
  }
}
</style>